<template>
  <div>
  <!-- 模糊查 -->
    <div>
        <div style="height:30px ;width: 100%;background:#f5f5f5; position: relative; top: -8px;">
            <span style="font-size: smaller; color: gray;">筛选查询</span>
        </div>
        <div style="height:50px">
        <el-row :gutter="20">
            <el-col :span="4"><el-input v-model="queryHome.frontDeskName" placeholder="输入姓名/手机号/邮箱"></el-input></el-col>
            <el-col :span="2"><el-button @click="getfrontdeskuser()">搜索</el-button></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        </el-row>  
        </div>
    </div>
    <!-- 全查 -->
    <div>
        <div style="height:30px ;width: 100%;background:#f5f5f5; position: relative; top: -8px;">
            <span style="font-size: smaller; color: gray;">客户列表</span>
        </div>
      <el-table :data="tableData" style="width: 100%" >
        <el-table-column prop="frontDeskName" label="用户名称" width="165" align="center">
        </el-table-column>
        <el-table-column prop="img" label="用户头像" width="150" align="center">
        <template slot-scope="scope">
        <el-image style="width: 100px; height: 100px" :src="'http://101.43.223.224:8765/image/getImageById?id=' + scope.row.img">
        </el-image>
        </template>
        </el-table-column>
        <el-table-column prop="frontDeskMember" label="会员状态" width="80" align="center">
        </el-table-column>
        <el-table-column prop="frontDeskMemberTime" label="会员到期时间" width="150" align="center">
        </el-table-column>
        <el-table-column prop="frontDeskPhone" label="用户手机号" width="150" align="center">
        </el-table-column>
        <el-table-column prop="frontDeskEmail" label="用户邮箱" width="165" align="center">
        </el-table-column>
        <el-table-column label="账号状态" width="100px" align="center">
        <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.accountType==1">
                禁用
            </el-tag>
            <el-tag type="success" v-else>
                正常
            </el-tag>
        </template>
        </el-table-column>
        <el-table-column prop="banTime" label="封禁时间" width="150" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="150" align="center">
        </el-table-column>
        <el-table-column prop="updateTime" label="修改时间" width="150" align="center">
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
        <el-button @click="deletedisable(scope.row)" size="mini" v-if="scope.row.accountType==0">封禁</el-button>
        <el-button @click="delAccountRelease(scope.row.id)" size="mini" v-else>解封</el-button>
        <el-button @click="queryInformation(scope.row.id)" size="mini">详细</el-button>
        </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pages.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pages.total"
      :current-page.sync="pages.pageNum"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      align="center"
      width="100%"
      >
    </el-pagination>
  <!-- 封禁表单 -->
    <el-dialog title="操作项目信息" :visible.sync="updatedisable" width="20%" :model="updateData" ref="addForm">
    <el-form class="demo-form-inline">
      <el-form-item label="活动区域">
        <el-select v-model="updateData.day" placeholder="禁用时间">
          <el-option label="1天" value="1"></el-option>
          <el-option label="3天" value="3"></el-option>
          <el-option label="1星期" value="7"></el-option>
          <el-option label="1月" value="30"></el-option>
          <el-option label="1年" value="365"></el-option> 
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="delfrontdeskuser">封禁</el-button>
      </el-form-item>
    </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      updatedisable:false,
      pages: {
        //分页参数
        total: 0, // 数据总条数
        pageNum: 1, // 当前页
        pageSize: 5, // 每页条数
      },
      updateData:{
        day:''
      },
      queryHome: {
        //分页参数
        frontDeskName: "", // 数据总条数
      },
    };
  },
   mounted () {
    this.getfrontdeskuser()
  },
  methods: {

    getfrontdeskuser() {
      // 查询所需数据(全查)
      this.$axios
        .get("/FrontDeskUser/getFrontDeskUser", {
          params: {
            frontDeskName: this.queryHome.frontDeskName,
            pageNum: this.pages.pageNum, // 当前页
            pageSize: this.pages.pageSize, // 每条页数
          },
        })
        .then((res) => {
          if (res.data.code=200) {
            //
            this.tableData = res.data.data.content;
            this.pages.total = res.data.data.totalSize;
            this.queryHome.frontDeskName = "";
            this.getfrontDeskMember()
          }
          this.loading = false; // 加载圈绑定
        })
        .catch((err) => {
          // this.myMessage('error', err),
        });
    },
    
    getfrontDeskMember() {// 会员状态赋值
        for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].frontDeskMember === 1) {
                this.tableData[i].frontDeskMember = "月卡会员";
            } else if (this.tableData[i].frontDeskMember === 2) {
                this.tableData[i].frontDeskMember = "季卡会员";
            } else if (this.tableData[i].frontDeskMember === 3){
                this.tableData[i].frontDeskMember = "年卡会员";
            } else if (this.tableData[i].frontDeskMember === 9){
                this.tableData[i].frontDeskMember = "超值年卡";
            } else   {
                this.tableData[i].frontDeskMember = "普通用户";
            }
        }
    },

    deletedisable(row){ //禁用表单打开
        this.updatedisable = true
        this.updateData.id=row.id
    },
    // 禁用方法
    delfrontdeskuser(){
        const form = new FormData();
        form.set("id", this.updateData.id);
        form.set("day", this.updateData.day);
        this.$axios
          .post("/FrontDeskUser/updateFrontDeskUser",form)
          .then((res) => {
            if ((res.data)) {
              this.myMessage("success", "封禁成功");
              this.updatedisable = false
              this.updateData={}
              this.getfrontdeskuser();
            } else {
              this.myMessage("wanging", "封禁失败");
            }
          })
          .catch(() => {
            this.myMessage("info", "封禁有误");
          });
    },
    // 解封方法
    delAccountRelease(id){
        const forms = new FormData();
        forms.set("id", id);
        this.$axios
          .post("/FrontDeskUser/updateAccountRelease",forms)
          .then((res) => {
            if ((res.data)) {
              this.myMessage("success", "解封成功");
              this.getfrontdeskuser();
            } else {
              this.myMessage("wanging", "解封失败");
            }
          })
          .catch(() => {
            this.myMessage("info", "解封有误");
          });
    },
    queryInformation(id) {
    this.$router.push({
      path: '/details',
      query: {
        rowid: id
      }
    });
  },
  // 滑块方法
      toggleDisableStatus(row) {
      const id = row.id;
      const isDisable = row.isDisable;
      this.$axios
        .post("/memberType/updateModify", {
          id,
          isDisable,
        })
        .then((res) => {
          this.$message({ type: "success", message: "修改状态成功" });
          this.getList();
          // 处理成功
        });
    },
    // 分页插件方法
    handleSizeChange(val) {
      this.pages.pageSize = val;
      this.getfrontdeskuser();
    },
    handleCurrentChange(val) {
      this.pages.pageNum = val;
      this.getfrontdeskuser();
    },
    myMessage(type, message) {
      this.$message({
        message: message,
        type: type,
      });
    },
  }
};
</script>

<style>
.el-button:focus, .el-button:hover {
    color: #19CAAD;
    border-color: #19CAAD;
    background-color: #fafafa;
}
</style>